<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../第1节工具函数/commonTool.js"></script>
</head>
<body>

    <div style="width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top: 0;"></div>
    <script>

        var div = document.getElementsByTagName('div')[0];
        
        div.onmousedown = function (e) {
            var disX, disY;
            disX = e.pageX - parseInt(div.style.left);
            disY = e.pageY - parseInt(div.style.top);
            // div.onmousemove = function(e) {
            // 用div，如果鼠标移动的太快，事件监听跟不上，鼠标会跑出方块的范围
            document.onmousemove = function (e) {
                var event = e || window.event;
                // console.log(event.pageX + " " + event.pageY);
                div.style.left = event.pageX - disX + 'px';
                div.style.top = event.pageY - disY + 'px';
            }

        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }

        // drag(div);

    </script>
</body>
</html>